<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="130px" class="demo-ruleForm">
    <el-form-item label="品牌" style="width: 100%">
      <div>
        <el-select
          placeholder="请选择"
          multiple
          filterable
          v-model="ruleForm.id">
          <el-option
            key="index"
            v-for="(item,index) in options"
            :label="item.brandName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
                 :loading="submitStatus">确定
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import * as types from '../../store/mutations-type'
  import api from '../../store/api'
  var format = require('../../util/util')
  import axios from 'axios'
  export default {
    data () {
      return {
        handle: 'add',
        submitStatus: false,
        ruleForm: {
          id: []
        },
        options: []
      }
    },
    props: ['busId', 'getTableData'],
    methods: {
      change () {
        axios.get(api.brandList)
          .then(response => {
            const _result = response.data
            if (_result.success) {
              this.options = _result.data
              this.bindBrand()
            } else {
            }
          })
      },
      bindBrand () {
        axios.get(api.brandByBus + '?busId=' + this.busId).then(response => {
          const result = response.data.data
          result.map((item) => {
            this.ruleForm.id.push(item.brandId)
          })
          /* for (let key of result) {
            this.ruleForm.id.push(key.brandId)
          } */
        })
      },
      submitForm (formName) {
        this.submitStatus = true
        let para = {
          busId: this.busId,
          brandIds: this.ruleForm.id.toString()
        }
        if (para.brandIds) {
          para = format.formatString(para)
          axios.post(api.brandAdd + '?' + para).then(response => {
            var result = response.data
            if (result.success) {
              this.$message({
                message: '品牌绑定成功',
                type: 'success'
              })
              this.submitStatus = false
              this.$store.dispatch(types.SUPPLIER_CLOSE_FORM)
            } else {
              this.submitStatus = false
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
            this.getTableData()
          }, (err) => {
            this.$message.error({
              title: '错误',
              message: err.response.data.message
            })
            this.submitStatus = false
          })
        } else {
          para = format.formatString(para)
          axios.post(api.brandAdd + '?' + para).then(response => {
            var result = response.data
            if (result.success) {
              this.$message({
                message: '品牌删除成功',
                type: 'success'
              })
              this.submitStatus = false
              this.$store.dispatch(types.SUPPLIER_CLOSE_FORM)
            } else {
              this.submitStatus = false
              this.$message.error({
                title: '错误',
                message: result.message
              })
            }
            this.getTableData()
          }, (err) => {
            this.$message.error({
              title: '错误',
              message: err.response.data.message
            })
            this.submitStatus = false
          })
        }
      }
    },
    mounted () {
      this.change()
    }
  }
</script>
<style>
  .demo-ruleForm {
    width: 440px;
  }
</style>

